Bootstrap Snippet Image map using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="banner__image-container">
        <img src="https://i.ibb.co/g7jCjX5/fuel-oil-system-design.png" alt="Fuel System Diagram" id="fuel-system-image">
        <!-- Fill Box Overlay -->
        <a href="fill-box.html" class="overlay" style="top: 3%; left: 0%; width: 10.2%; height: 18%;" title="Fill Box"></a>
        <a href="fill-box.html" class="overlay" style="top: 25%; left: 1%; width: 8%; height: 4%;" title="Fill Box label"></a>
        <!-- Filtration Overlay -->
        <a href="filtration.html" class="overlay" style="top: 0%; left: 28%; width: 11%; height: 21%;" title="Filtration"></a>
        <a href="filtration.html" class="overlay" style="top: 26%; left: 29%; width: 8%; height: 4%;" title="Filtration label"></a>
        <!-- Main Tank Overlay -->
        <a href="main-tank.html" class="overlay" style="top: 42%; left: 23%; width: 29%; height: 50%;" title="Main Tank"></a>
        <a href="main-tank.html" class="overlay" style="top: 96%; left: 30%; width: 15%; height:4%;" title="Main Tank label"></a>
        <!-- Pump Set Overlay -->
        <a href="pump-set.html" class="overlay" style="top: 80%; left: 62%; width: 13%; height: 12%;" title="Pump Set"></a>
        <a href="pump-set.html" class="overlay" style="top: 96%; left: 64%; width: 9%; height: 4%;" title="Pump Set label"></a>
        <!-- Day Tank Overlay -->
        <a href="day-tank.html" class="overlay" style="top: 3%; left: 84.2%; width: 16%; height: 27%;" title="Day Tank"></a>
        <a href="day-tank.html" class="overlay" style="top: 34%; left: 85%; width: 14%; height: 5%;" title="Day Tank label"></a>
      </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.banner__image-container {
    position: relative;
    max-width: 100%;
  }
  #fuel-system-image {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Style for each overlayed area */
  .overlay {
    position: absolute;
    border: 2px solid rgba(255, 0, 0, 0.5); /* Red semi-transparent border */
    background-color: rgba(255, 0, 0, 0.2); /* Optional background to highlight */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .overlay:hover {
    background-color: rgba(255, 0, 0, 0.4); /* Darker on hover */
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Image map"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Image map" Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Image map"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY